<template>
    <header>
        <img src="/logo-black.png" alt="" />
        <strong>{{ settings.title }}</strong>
    </header>
    <section>
        <router-view />
    </section>
    <Footer type="black" />
</template>

<script setup>
import Footer from "./components/footer.vue";
import { useSettingsStore } from "@/stores/settings";

const settings = useSettingsStore();
</script>

<style lang="scss" scoped>
header {
    flex: none;
    display: flex;
    align-items: center;
    height: 80px;
    background: #fff;
    padding-left: 20px;
    img {
        width: auto;
        height: 44px;
    }
    strong {
        display: flex;
        align-items: center;
        font-size: 24px;
        font-weight: bold;
        color: rgba(#000, 0.85);
        letter-spacing: 1px;
        padding-left: 12px;
        margin-left: 12px;
        &::before {
            content: "";
            width: 1px;
            height: 30px;
            background: rgba(#000, 0.15);
            margin-right: 12px;
        }
    }
}
section {
    flex: 1;
}
.caih-footer {
    background: #333;
}
</style>
